<template>
  <div class="ct-dropdown">
    <ct-tooltip
      ref="tooltipRef"
      :placement="placement"
      :trigger="trigger"
      :manual="manual"
      :openDelay="openDelay"
      :closeDelay="closeDelay"
      @visible-change="emit('visible-change', $event)"
    >
      <slot />
      <template #content>
        <ul class="ct-dropdown__menu">
          <template v-for="item in menuOptions" :key="item.key">
            <li class="divided-placeholder" v-if="item.divided"></li>
            <li
              class="ct-dropdown__item"
              :class="{ 'is-disabled': item.disabled }"
              :id="`dropdown-item-${item.key}`"
              @click="handlerSelect(item)"
            >
              <RenderVnode :v-node="item.label"></RenderVnode>
            </li>
          </template>
        </ul>
      </template>
    </ct-tooltip>
  </div>
</template>
<script setup>
import propsOptions from './props'
import { ref, watch } from 'vue'
import RenderVnode from '@/common/renderVnode'
defineOptions({
  name: 'CTDropdown',
})
const tooltipRef = ref(null)
const emit = defineEmits(['visible-change', 'select'])
const props = defineProps(propsOptions)

const handlerSelect = (item) => {
  if (!item.disabled) {
    emit('select', item)
  }
  if (props.hideAfterClick) {
    tooltipRef.value.close()
  }
}

defineExpose({
  open: () => {
    tooltipRef.value?.open()
  },
  close: () => {
    tooltipRef.value?.close()
  },
})
</script>
<style lang="scss" scoped></style>
